import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import axios from 'axios';

// 创建一个Vue实例来管理token的响应式状态
const tokenManager = new Vue({
  data: {
    token: localStorage.getItem('authorization') || ''
  },
  watch: {
    token(newToken) {
      localStorage.setItem('authorization', newToken);
    }
  }
});

// axios请求拦截器给每个请求都加上请求头
axios.interceptors.request.use(
  config => {
    // 使用响应式的token
    if (tokenManager.token) {
      config.headers.authorization = tokenManager.token;
    }
    return config;
  }
);

axios.interceptors.response.use(
  resp => {
    if (resp.data.code == 2001) {
      // 已经声明了import router from './router'，可以直接使用
      router.push({ path: '/login' });
    }
    if (resp.data.code == 500) {
      // 跳到一个页面
    }
    return resp;
  }
);

Vue.prototype.$axios = axios; // 把axios配置为全局，所有组件都可以使用
Vue.prototype.$tokenManager = tokenManager; // 将tokenManager暴露给所有组件

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');